﻿<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">

<head  th:replace="layout::head(${title},${desc})"></head>

<body>
    
<div id="main-wrapper">

    <!--替代头部-->
    <div th:replace="layout::header"></div>
    
    <!--Page Banner Section start-->
    <div class="page-banner-section section">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h1 class="page-banner-title">Agency Details</h1>
                    <ul class="page-breadcrumb">
                        <li><a th:href="@{index.html}">主页</a></li>
                        <li class="active">Agency Details</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--Page Banner Section end-->

    <!--Agency Section start-->
    <div class="agency-section section pt-100 pt-lg-80 pt-md-70 pt-sm-60 pt-xs-50 pb-100 pb-lg-80 pb-md-70 pb-sm-60 pb-xs-50">
        <div class="container">
            
            <div class="row row-25">

                <!--Agency Image-->
                <div class="col-lg-5 col-12 mb-sm-30 mb-xs-30">
                    <div class="agency-image">
                        <img src="assets/images/agencies/agency-1.jpg" alt="">
                    </div>
                </div>

                <!--Agency Content-->
                <div class="col-lg-7 col-12">
                    <div class="agency-content">
                        <h3 class="title" th:text="${agencyCompanyInfo.name}"></h3>
                        <p th:text="${agencyCompanyInfo.brief}"></p>
                        <ul>
                            <li th:text="${agencyCompanyInfo.companyAddress}"><i class="pe-7s-map"></i></li>
                            <li><i class="pe-7s-phone"></i><a href="#" th:text="${agencyCompanyInfo.concatPhoneOne}"></a></li>
                            <li><i class="pe-7s-mail-open"> </i><a href="#" th:text="${agencyCompanyInfo.concatMail}"></a></li>
                            <li><i class="pe-7s-global"></i><a href="#" th:text="${agencyCompanyInfo.companyWeb}"></a></li>
                            <li th:text="${agencyCompanyInfo.icp}"><i class="pe-7s-credit"></i></li>
                            <li><i class="pe-7s-users"></i>4 Agents</li>
                            <li><i class="pe-7s-photo"></i>6 Properties</li>
                        </ul>
                        <div class="social">
                            <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
                            <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
                            <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
                            <a href="#" class="google"><i class="fa fa-google-plus"></i></a>
                        </div>
                    </div>
                </div>
                
            </div>
            
        </div>
    </div>
    <!--Agency Section end-->

    <!--Agent Section start-->
    <div class="agent-section section pb-100 pb-lg-80 pb-md-70 pb-sm-60 pb-xs-50">
        <div class="container">
           
            <!--Section Title start-->
            <div class="row">
                <div class="col-md-12 mb-60 mb-xs-30">
                    <div class="section-title center">
                        <h1 th:text="${agencyCompanyInfo.name}+' Agents'"></h1>
                    </div>
                </div>
            </div>
            <!--Section Title end-->
            
            <div class="row">
                <div class="agent-carousel section">

                    <!--Agent satrt-->
                    <div class="col" th:each="agentAndUser : ${agentAndUserVOS}">
                        <div class="agent">
                            <div class="image">
                                <a class="img" th:href="@{agent-details.html}"><img src="assets/images/agent/agent-1.jpg" alt=""></a>
                                <div class="social">
                                    <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
                                    <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
                                    <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
                                    <a href="#" class="google"><i class="fa fa-google-plus"></i></a>
                                </div>
                            </div>
                            <div class="content">
                                <h4 class="title"><a th:href="@{agent-details.html}" th:text="${agentAndUser.User.name}"></a></h4>
                                <a href="#" class="phone" th:text="${agentAndUser.User.phone}"></a>
                                <a href="#" class="email" th:text="${agentAndUser.agent.email}"></a>
                                <span class="properties">5房</span>
                            </div>
                        </div>
                    </div>
                    <!--Agent end-->

                </div>
            </div>
        </div>
    </div>
    <!--Agent Section end-->

    <!--Feature property section start-->
    <div class="property-section section pb-100 pb-lg-80 pb-md-70 pb-sm-60 pb-xs-50">
        <div class="container">
            
            <!--Section Title start-->
            <div class="row">
                <div class="col-md-12 mb-60 mb-xs-30">
                    <div class="section-title center">
                        <h1 th:text="${agencyCompanyInfo.name}+' Properties'"></h1>
                    </div>
                </div>
            </div>
            <!--Section Title end-->
            
            <div class="row">
               
                <!--Property Slider start-->
                <div class="property-carousel section">

                    <!--Property start-->
                    <div class="property-item col" th:each="propertiesAndRentType: ${propertiesAndRentType}">
                        <div class="property-inner">
                            <div class="image">
                                <a th:href="@{single-properties.html}"><img src="assets/images/property/property-1.jpg" alt=""></a>
                                <ul class="property-feature">
                                    <li>
                                        <span class="area"><img src="assets/images/icons/area.png" alt="" th:text="${propertiesAndRentType.properties.square}+' 平米'"></span>
                                    </li>
                                    <li>
                                        <span class="bed"><img src="assets/images/icons/bed.png" alt="" th:text="${propertiesAndRentType.properties.roomNumber}"></span>
                                    </li>
                                    <li>
                                        <span class="bath"><img src="assets/images/icons/bath.png" alt="" th:text="${propertiesAndRentType.properties.bathroomNumber}"></span>
                                    </li>
                                    <li>
                                        <span class="parking"><img src="assets/images/icons/parking.png" alt="" th:text="${propertiesAndRentType.properties.garageNumber}"></span>
                                    </li>
                                </ul>
                            </div>
                            <div class="content">
                                <div class="left">
                                    <h3 class="title"><a th:href="@{single-properties.html}" th:text="${propertiesAndRentType.properties.title}"></a></h3>
                                    <span class="location"><img src="assets/images/icons/marker.png" alt="" th:text="${propertiesAndRentType.properties.address}"></span>
                                </div>
                                <div class="right">
                                    <div class="type-wrap">
                                        <span class="price"  th:text="'￥'+${propertiesAndRentType.properties.price}+'/月'"><span></span></span>
                                        <span class="type" th:text="${propertiesAndRentType.propertiesRentType.typeName}"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--Property end-->
                </div>
                <!--Property Slider end-->
            </div>
        </div>
    </div>
    <!--Feature property section end-->

    <div th:replace="layout::footer"></div>

</div>

<!-- Placed js at the end of the document so the pages load faster -->

<!-- All jquery file included here -->
<script src="http://ditu.google.cn/maps/api/js?sensor=false&libraries=geometry&v=3.22&key=AIzaSyDAq7MrCR1A2qIShmjbtLHSKjcEIEBEEwM"></script>
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/map-place.js"></script>
<script src="assets/js/main.js"></script>

</body>

</html>
